import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import s from './WorldBox.module.css';
import * as echarts from 'echarts';
import { WORLD_JSON } from './world.js';
import ShadeBox from './ShadeBox';
import BugStore from './BugStore';
export default function ChartBox({
	className,
	chang,
	bugStore,
	seebug,
	account,
	active,
}) {
	const effect = {
		show: true,
		scaleSize: 5,
		period: 2, // 速度s
		color: '#fff',
		// shadowColor: 'rgba(220,220,220,0.4)',
		shadowBlur: 5,
		trailLength: 0.1, // 光斑拖尾0-1
		symbolSize: 5, // 光斑[w,h]
	};
	const formatterFun = params => {
		const data = params.data;
		let str = '';
		if (params.seriesType === 'scatter' && data[0] === 113.201) {
			str += `<div style="padding:0.2rem 1rem;background:#fff;border-radius: 4px;">`;
			str += `<span style="color:#999EA8;" >${account.name}</span></br>`;
			str += `<span style="color:#2A2B31;">已为您持续服务<span style="color: #0b6fd6;">${account.days}</span>天</span></br>`;
			str += `<span style="color:#2A2B31;">监测Web资产<span style="color: #0b6fd6;">${account.total_jobs}</span>个，发现风险资产${account.risk_jobs}个</span></br>`;
			str += `<span style="color:#2A2B31;">监测主机资产<span style="color:#f04038;">${account.total_jobs}</span>个，发现风险资产${account.risk_jobs}个</span></br>`;
			str += `</div>`;
		} else {
			str += `<div style="padding:0.2rem 1rem;background-color:#ffffff70;border-radius: 4px;">`;
			str += `<span style="color:#999ea8;">创宇安全智脑、Seebug漏洞平台及</span></br>`;
			str += `<span style="color:#999ea8;">404实验室持续安全赋能</span></br>`;
			str += `</div>`;
		}
		return str;
	};
	const linkData = [
		{
			coords: [
				[-65.02182, 0.5147],
				[-15, 90],
			],
			lineStyle: { curveness: 0.25 },
		},
		{
			coords: [
				[-89.02182, 48.5147],
				[-15, 90],
			],
			lineStyle: { curveness: 0.25 },
		},
		{
			coords: [
				[-110.02182, 38.5147],
				[-15, 90],
			],
			lineStyle: { curveness: 0.25 },
		},
		{
			coords: [
				[-77.02182, 38.5147],
				[-15, 90],
			],
			lineStyle: { curveness: 0.25 },
		},
		//
		{
			coords: [
				[10.001, 51.0768],
				[0, 78],
			],
			lineStyle: { curveness: 0.15 },
		},
		{
			coords: [
				[0.001, 12.0768],
				[0, 78],
			],
			lineStyle: { curveness: 0.15 },
		},
		{
			coords: [
				[10.001, 22.0768],
				[0, 78],
			],
			lineStyle: { curveness: 0.15 },
		},
		//
		{
			coords: [
				[103.001, 1.0768],
				[5, 78],
			],
			lineStyle: { curveness: -0.2 },
		},
		//
		{
			coords: [
				[123, 63],
				[15, 90],
			],
			lineStyle: { curveness: -0.25 },
		},
		{
			coords: [
				[103, 33],
				[15, 90],
			],
			lineStyle: { curveness: -0.25 },
		},
	];
	const reverseLinkData = [
		{
			coords: [
				[15, 88],
				[113.201, 39.5668],
			],
			lineStyle: { curveness: 0.25 },
		},
	];
	const mapPoint = [
		[-65.02182, 0.5147],
		[-89.02182, 48.5147],
		[-110.02182, 38.5147],
		[-77.02182, 38.5147],
		[10.001, 51.0768],
		[0.001, 12.0768],
		[10.001, 22.0768],
		[103.001, 1.0768],
		[123, 63],
		[103, 33],
	];
	const allLinkData = linkData.concat(reverseLinkData);
	const option = {
		tooltip: {
			backgroundColor: '#fff0',
			position: 'top',
			formatter: function (params) {
				return formatterFun(params);
			},
		},
		geo: {
			map: 'world',
			label: {
				// true会显示城市名
				emphasis: {
					show: false,
				},
			},
			silent: true,
			zoom: 1,
			itemStyle: {
				normal: {
					borderColor: '#DAE9F9',
					areaColor: '#DAE9F9',
				},
				emphasis: {
					borderColor: '#DAE9F9',
					areaColor: '#DAE9F9',
				},
			},
		},
		series: [
			{
				// 线条参数和样式
				type: 'lines',
				coordinateSystem: 'geo',
				silent: true, // 是否不响应事件
				label: {
					show: false,
				},
				lineStyle: {
					normal: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{
									offset: 0,
									color: '#FF6A00', // 0% 处的颜色
								},
								{
									offset: 1,
									color: 'rgba(255, 106, 0, 0)', // 100% 处的颜色
								},
							],
						},
						// 尾迹线条宽度
						width: 3,
						// 尾迹线条透明度
						opacity: 1,
					},
				},
				data: linkData,
			},
			{
				// 反向线条
				type: 'lines',
				coordinateSystem: 'geo',
				label: {
					show: false,
				},
				silent: true,
				lineStyle: {
					normal: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{
									offset: 0,
									color: 'rgba(0, 144, 255, 0)', // 0% 处的颜色
								},
								{
									offset: 1,
									color: '#0072FF', // 100% 处的颜色
								},
							],
						},
						// 尾迹线条宽度
						width: 3,
						// 尾迹线条透明度
						opacity: 1,
					},
				},
				data: reverseLinkData,
			},
			{
				// 隐形线
				type: 'lines',
				coordinateSystem: 'geo',
				silent: true,
				zlevel: 10,
				effect,
				label: {
					show: false,
				},
				lineStyle: {
					width: 0,
				},
				data: allLinkData,
			},
			{
				// 地图透明点
				type: 'scatter',
				coordinateSystem: 'geo',
				emphasis: {
					scale: false,
					itemStyle: { color: '#ccc0', borderColor: '#FF6A00', borderWidth: 2 },
				},
				animation: false,
				data: mapPoint,
				symbolSize: 11, // 圈的大小
				itemStyle: {
					color: '#ccc0',
				},
			},
			{
				// 地图点
				type: 'scatter',
				coordinateSystem: 'geo',
				emphasis: { scale: false },
				animation: false,
				cursor: 'default',
				silent: true,
				data: mapPoint,
				symbolSize: 6, // 圈的大小
				itemStyle: {
					color: '#FF6A00',
				},
			},

			{
				// 中国大点
				type: 'scatter',
				coordinateSystem: 'geo',
				emphasis: { scale: false },
				animation: false,
				silent: true,
				cursor: 'default',
				data: [[113.201, 39.5668]],
				symbolSize: 12, // 圈的大小
				itemStyle: {
					color: '#0072FF',
				},
			},
			{
				// 顶点弧形(点实现)
				type: 'scatter',
				coordinateSystem: 'geo',
				emphasis: { scale: false },
				silent: true,
				data: [
					[-15, 90],
					[0, 78],
					[5, 78],
					[15, 90],
				],
				symbolSize: 3, // 圈的大小
				itemStyle: {
					color: '#FF6A00',
				},
			},
			{
				// 中国特殊点
				type: 'scatter',
				coordinateSystem: 'geo',
				emphasis: { scale: false },
				data: [[113.201, 44]],
				symbolSize: [16, 20], // 圈的大小
				symbol:
					'image://',
			},
		],
	};
	React.useEffect(() => {
		const myChart = echarts.init(document.getElementById('mapWorld'));
		echarts.registerMap('world', WORLD_JSON);
		myChart.setOption(option, true);
		myChart.resize();
		myChart.on('click', function (params) {
			if (params.data[0] === 113.201) {
				active('china');
			}
		});
	}, [chang, account]);
	return (
		<div className={cn(className, s.chartBox)}>
			<BugStore bugStore={bugStore}></BugStore>
			<div id="mapWorld" style={{ width: '60vw', height: '35rem' }}></div>
			<ShadeBox seebug={seebug} />
		</div>
	);
}

ChartBox.propTypes = {
	className: PropTypes.string,
	chang: PropTypes.string,
	bugStore: PropTypes.any,
	seebug: PropTypes.any,
	account: PropTypes.any,
	active: PropTypes.func.isRequired,
};

ChartBox.defaultProps = {
	className: s.chartBox,
};
